<template>
	<view class="listpage">
		<Login></Login>
		<view class="searchpage">
			<view class="header">
				<text>我的收纳盒</text>
			</view>
			<view class="nav" v-for="(item,index) in listData" :key="index" >
				<view class="nav-left" @click="toDatailsBox(item)">
					<text >{{item.boxName}}</text>
					<!-- <text>{{item.boxIntroduce}}</text>
					<text>{{item.boxQrCode}}</text> -->
				</view>
				<view class="nav-right" @click="deteleBox(item)">
					<text>作废</text>
				</view>
			</view>
			
			<view class="nav">
				<view class="nav-left">
					<text>新增收纳盒</text>
				</view>
				<view class="nav-right" @click="addNavList">
					<text class="icon1 iconfont icon-tianjia "></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Login from "../../common/login/login.vue"
	import BaseUrl from "../../utlis/api.js"
	export default {
		components: {
			Login
		},
		data() {
			return {
				listData: null
			}
		},
		onLoad(option) {
			this.getDataList()
		},
		methods: {
			addNavList() {
				uni.navigateTo({
					url: '/pages/newStorageBox/newStorageBox',
				})
			},
			// storageDetails页面
			toDatailsBox(v) {
				const params = v
				uni.navigateTo({
					url: '/pages/storageDetails/storageDetails?params=' + JSON.stringify(params),
				})
			},
			// 删除盒子
			deteleBox(value){
				console.log(value.boxId)
				const boxIds=value.boxId
				const token = wx.getStorageSync('token') || [];
				uni.request({
					url: BaseUrl+"/wx/sbox/box/"+boxIds,
					method:'DELETE',
					header: {
						"Authorization": "Bearer " + token,
					},
					success: (res) => {
						console.log(res)
						this.getDataList()
						uni.showToast({
							title: res.data.msg
						})
					}
				})
			},
			getDataList() {
					const token = wx.getStorageSync('token') || [];
					const userId=wx.getStorageSync('userId')
					uni.request({
						url: BaseUrl+"/wx/sbox/box/list?userId="+userId,
						method: 'GET',
						header: {
							"Authorization": "Bearer " + token,
						},
						data:userId,
						success: (res) => {
							console.log(res)
						this.listData=res.data.rows
						}
					})
			},
		}
	}
</script>

<style>
	.listpage {
		width: 100%;
		height: 100%;
		background-color: #c3b18b;
	}

	.searchpage {
		width: 100%;
		height: 100%;
		background-color: #f9f7f2;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 52rpx 40rpx 0 40rpx;
		margin-bottom: 22rpx;
	}

	.header {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 26px;
		color: #000000;
		opacity: 0.7;
	}

	.nav {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		border-bottom: 1px solid #DEDDD9;
		display: flex;
		justify-content: space-between;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		opacity: 0.6;
	}

	.nav-left {
		width: 60%;
		display: flex;
		justify-content: space-between;
	}

	.nav-right {
		width: 15%;
	}

	.icon1 {
		color: #707070;
		font-size: 60rpx;
	}
</style>
